<template>
  <div>
    <h1>{{ state.search }}</h1>
    <button @click="handleSearch">改变查询字段</button>
  </div>
</template>
<script>
//引入watchEffect方法
import {reactive, watchEffect} from 'vue'
export default{
  setup(){
    let state = reactive({
      search: Date.now() //定义search为当前事件戳
    })
    //watchEffect方法接收一个函数作为参数，并且该函数内如果有响应式变量
    //当其值被改变时，回调函数就会被执行，类似computed钩子函数
    const stop = watchEffect(() => {
      console.log('监听查询字段',state.search)
    })
    //单击事件方法，更新search变量为当前时间戳
    const handleSearch = () => {
      state.search = Date.now()
    }
    //2秒后，执行watchEffect方法返回的stop函数
    setTimeout(() =>{
      stop()
    }, 2000)
    return {
      state,
      handleSearch
    }
  }
}
</script>